<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中国物种密度分布图生成器</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 20px;
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: #2a2a2a;
            min-height: 100vh;
            color: #cccccc;
        }
        .container {
            max-width: 1400px;
            margin: 0 auto;
            background: #1a1a1a;
            border-radius: 15px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.4);
            overflow: hidden;
            border: 1px solid #3a3a3a;
        }
        .header {
            background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }
        .header h1 {
            margin: 0;
            font-size: 2.2em;
            font-weight: 300;
        }
        .header p {
            margin: 10px 0 0 0;
            opacity: 0.9;
            font-size: 1.1em;
        }
        .content {
            padding: 30px;
            background: #1a1a1a;
        }
        .main-layout {
            display: flex;
            gap: 30px;
            margin-bottom: 30px;
        }
        .map-container {
            flex: 2;
            height: 600px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
            border: 2px solid #3a3a3a;
            background: #1a1a1a;
        }
        .control-panel {
            flex: 1;
            background: #2a2a2a;
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
            border: 1px solid #3a3a3a;
        }
        .control-panel h3 {
            margin-top: 0;
            color: #60a5fa;
            border-bottom: 2px solid #3b82f6;
            padding-bottom: 10px;
        }
        .data-input {
            margin-bottom: 20px;
        }
        .data-input label {
            display: block;
            margin-bottom: 5px;
            font-weight: 600;
            color: #cccccc;
        }
        .data-input input {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #3a3a3a;
            border-radius: 5px;
            font-size: 14px;
            box-sizing: border-box;
            background: #1a1a1a;
            color: #cccccc;
        }
        .data-input input:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
        }
        .btn {
            background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
            color: white;
            border: none;
            padding: 12px 24px;
            margin: 5px 0;
            border-radius: 25px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s ease;
            width: 100%;
        }
        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        .btn-secondary {
            background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
        }
        .btn-success {
            background: linear-gradient(135deg, #059669 0%, #10b981 100%);
        }
        .data-table {
            background: #2a2a2a;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
            margin-top: 20px;
            border: 1px solid #3a3a3a;
        }
        .data-table h3 {
            margin-top: 0;
            color: #60a5fa;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 15px;
        }
        th, td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #3a3a3a;
            color: #cccccc;
        }
        th {
            background: #3a3a3a;
            font-weight: 600;
            color: #60a5fa;
        }
        .legend {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin: 20px 0;
            flex-wrap: wrap;
        }
        .legend-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .legend-color {
            width: 20px;
            height: 20px;
            border-radius: 50%;
        }
        .legend-text {
            font-size: 14px;
            color: #cccccc;
        }
        .instructions {
            background: #1a1a1a;
            border-left: 4px solid #3b82f6;
            padding: 15px;
            margin-bottom: 20px;
            border-radius: 5px;
            border: 1px solid #3a3a3a;
        }
        .instructions h4 {
            margin-top: 0;
            color: #60a5fa;
        }
        .instructions ul {
            margin: 10px 0;
            padding-left: 20px;
        }
        .instructions li {
            margin: 5px 0;
        }
        
        /* 自定义区间配置样式 */
        .interval-item {
            background: #2a2a2a;
            padding: 8px;
            border-radius: 5px;
            border: 1px solid #3a3a3a;
            margin-bottom: 8px;
        }
        
        .interval-item input[type="number"] {
            background: #1a1a1a;
            border: 1px solid #3a3a3a;
            color: #cccccc;
            border-radius: 3px;
        }
        
        .interval-item input[type="text"] {
            background: #1a1a1a;
            border: 1px solid #3a3a3a;
            color: #cccccc;
            border-radius: 3px;
        }
        
        .interval-item input:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
        }
        
        .btn-outline-primary {
            border-color: #3b82f6;
            color: #3b82f6;
        }
        
        .btn-outline-primary:hover {
            background-color: #3b82f6;
            color: white;
        }
        
        .btn-outline-success {
            border-color: #10b981;
            color: #10b981;
        }
        
        .btn-outline-success:hover {
            background-color: #10b981;
            color: white;
        }
        
        .btn-outline-danger {
            border-color: #ef4444;
            color: #ef4444;
        }
        
        .btn-outline-danger:hover {
            background-color: #ef4444;
            color: white;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1 id="mapTitle">🗺️ 中国物种密度分布图生成器</h1>
            <p>输入数据，实时生成密度分布图，点击地图查看详情</p>
        </div>
        
        <div class="content">
            <div class="instructions">
                <h4>📋 使用说明</h4>
                <ul>
                    <li><strong>手动输入</strong>: 在右侧面板填写物种名称、经度、纬度、数量</li>
                    <li><strong>Excel导入</strong>: 点击"下载模板"获取标准格式，填写后导入</li>
                    <li><strong>生成地图</strong>: 点击"生成密度分布图"按钮</li>
                    <li><strong>查看详情</strong>: 点击地图上的任意数据点，查看详细信息</li>
                    <li><strong>数据管理</strong>: 可以添加、删除、修改数据点</li>
                </ul>
            </div>
            
            <div class="main-layout">
                <div id="chinaMap" class="map-container"></div>
                
                <div class="control-panel">
                    <h3>📊 数据输入</h3>
                    
                    <div class="data-input">
                        <label for="provinceName">物种名称:</label>
                        <input type="text" id="provinceName" placeholder="例如：麋鹿" value="麋鹿">
                    </div>
                    
                    <div class="data-input">
                        <label for="longitude">经度:</label>
                        <input type="number" id="longitude" placeholder="例如：120.0" step="0.000001" value="120.0">
                    </div>
                    
                    <div class="data-input">
                        <label for="latitude">纬度:</label>
                        <input type="number" id="latitude" placeholder="例如：32.0" step="0.000001" value="32.0">
                    </div>
                    
                    <div class="data-input">
                        <label for="numbers">数量/密度:</label>
                        <input type="number" id="numbers" placeholder="例如：1000" value="1000">
                    </div>
                    
                    <button class="btn" onclick="addDataPoint()">➕ 添加数据点</button>
                    <button class="btn btn-secondary" onclick="clearAllData()">🗑️ 清空所有数据</button>
                    <button class="btn btn-success" onclick="generateMap()">🎯 生成密度分布图</button>
                    <button class="btn btn-secondary" onclick="showNationalMap()">🗺️ 返回全国视图</button>
                    
                    <h3>📁 Excel导入</h3>
                    <div class="data-input">
                        <label for="excelFile">选择Excel文件:</label>
                        <input type="file" id="excelFile" accept=".xlsx,.xls,.csv" style="padding: 8px 0;">
                    </div>
                    <button class="btn btn-secondary" onclick="importExcel()">📥 导入Excel数据</button>
                    <button class="btn btn-secondary" onclick="downloadTemplate()">📋 下载模板</button>
                    
                    <h3>🎨 自定义区间配置</h3>
                    
                    <!-- 自定义区间配置 -->
                    <div class="data-input">
                        <label>密度区间配置:</label>
                        <div id="intervalConfigs" style="margin-bottom: 10px;">
                            <!-- 动态生成的区间配置 -->
                        </div>
                        <button class="btn btn-sm btn-outline-primary" onclick="addInterval()" style="margin-bottom: 10px;">
                            <i class="fas fa-plus"></i> 添加区间
                        </button>
                    </div>
                    
                    <button class="btn btn-secondary" onclick="updateMapColors()">🔄 更新颜色</button>
                    <button class="btn btn-sm btn-outline-success" onclick="applyCustomIntervals()" style="margin-left: 5px;">✅ 应用自定义区间</button>
                    
                    <h3>📈 当前数据</h3>
                    <div id="currentData">
                        <p><strong>数据点总数:</strong> <span id="dataCount">0</span></p>
                        <p><strong>总数量:</strong> <span id="totalNumbers">0</span></p>
                        <p><strong>包含物种:</strong> <span id="provinceList">无</span></p>
                    </div>
                </div>
            </div>
            
            <div class="legend" id="customLegend">
                <!-- 动态生成的自定义区间图例 -->
            </div>
            
            <div class="usage-tip" style="text-align: center; margin: 20px 0; padding: 15px; background: #1a1a1a; border-radius: 8px; border-left: 4px solid #3b82f6; border: 1px solid #3a3a3a;">
                <p style="margin: 0; color: #60a5fa; font-weight: 500;">
                    💡 <strong>使用说明:</strong> 输入物种名称和密度数据，点击"生成密度分布图"即可生成地图，点击数据点查看详情，<strong>点击地块可选中/取消选中省份</strong>
                </p>

            </div>
            
            <div class="data-table">
                <h3>📋 数据明细</h3>
                <div style="margin-bottom: 15px;">
                    <button class="btn btn-secondary" onclick="exportToExcel()" style="width: auto; margin-right: 10px;">📤 导出为Excel</button>
                    <span style="color: #cccccc; font-size: 14px;">当前共 <strong id="dataCountDisplay">0</strong> 条数据</span>
                </div>
                <table id="dataTable">
                    <thead>
                        <tr>
                            <th>物种</th>
                            <th>经度</th>
                            <th>纬度</th>
                            <th>数量</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="tableBody">
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script>
        // 初始化图表
        let myChart = echarts.init(document.getElementById('chinaMap'));
        let dataPoints = [];
        let speciesData = []; // 独立的物种基础数据
        let currentProvince = null;
        
        // 自定义区间配置
        let customIntervals = [
            { min: 0, max: 1, color: '#93c5fd', label: '极低密度' },
            { min: 1, max: 3, color: '#3b82f6', label: '低密度' },
            { min: 3, max: 8, color: '#06b6d4', label: '中低密度' },
            { min: 8, max: 15, color: '#10b981', label: '中密度' },
            { min: 15, max: 25, color: '#f59e0b', label: '中高密度' },
            { min: 25, max: 40, color: '#ea580c', label: '高密度' },
            { min: 40, max: 100, color: '#dc2626', label: '极高密度' }
        ];
        
        // 初始化自定义区间配置界面
        function initCustomIntervals() {
            const container = document.getElementById('intervalConfigs');
            container.innerHTML = '';
            
            customIntervals.forEach((interval, index) => {
                const intervalDiv = document.createElement('div');
                intervalDiv.className = 'interval-item';
                intervalDiv.style.cssText = 'display: flex; align-items: center; gap: 5px; margin-bottom: 5px;';
                
                intervalDiv.innerHTML = `
                    <input type="number" value="${interval.min}" min="0" max="100" step="0.1" 
                           style="width: 60px; padding: 2px; font-size: 12px;" 
                           onchange="updateInterval(${index}, 'min', this.value)">
                    <span style="color: #cccccc; font-size: 12px;">-</span>
                    <input type="number" value="${interval.max}" min="0" max="100" step="0.1" 
                           style="width: 60px; padding: 2px; font-size: 12px;" 
                           onchange="updateInterval(${index}, 'max', this.value)">
                    <span style="color: #cccccc; font-size: 12px;">%</span>
                    <input type="color" value="${interval.color}" 
                           style="width: 30px; height: 25px; padding: 0; border: none; border-radius: 3px; cursor: pointer;" 
                           onchange="updateInterval(${index}, 'color', this.value)">
                    <input type="text" value="${interval.label}" placeholder="标签" 
                           style="width: 80px; padding: 2px; font-size: 12px;" 
                           onchange="updateInterval(${index}, 'label', this.value)">
                    <button class="btn btn-sm btn-outline-danger" onclick="removeInterval(${index})" 
                            style="padding: 2px 6px; font-size: 10px;">×</button>
                `;
                
                container.appendChild(intervalDiv);
            });
            
            // 更新自定义图例
            updateCustomLegend();
        }
        
        // 更新区间配置
        function updateInterval(index, field, value) {
            if (field === 'min' || field === 'max') {
                customIntervals[index][field] = parseFloat(value);
            } else {
                customIntervals[index][field] = value;
            }
        }
        
        // 添加新区间
        function addInterval() {
            const newInterval = {
                min: customIntervals.length > 0 ? customIntervals[customIntervals.length - 1].max : 0,
                max: customIntervals.length > 0 ? customIntervals[customIntervals.length - 1].max + 10 : 10,
                color: '#60a5fa',
                label: '新区间'
            };
            customIntervals.push(newInterval);
            initCustomIntervals();
        }
        
        // 删除区间
        function removeInterval(index) {
            if (customIntervals.length > 1) {
                customIntervals.splice(index, 1);
                initCustomIntervals();
            } else {
                alert('至少需要保留一个区间！');
            }
        }
        
        // 更新自定义图例
        function updateCustomLegend() {
            const legendContainer = document.getElementById('customLegend');
            legendContainer.innerHTML = '';
            
            customIntervals.forEach((interval, index) => {
                const legendItem = document.createElement('div');
                legendItem.className = 'legend-item';
                legendItem.style.cssText = 'display: flex; align-items: center; margin-bottom: 10px;';
                
                legendItem.innerHTML = `
                    <div class="legend-color" style="background: ${interval.color}; width: 20px; height: 20px; border-radius: 3px; margin-right: 10px;"></div>
                    <span class="legend-text" style="color: #cccccc; font-size: 14px;">
                        ${interval.label} (${interval.min}%-${interval.max}%)
                    </span>
                `;
                
                legendContainer.appendChild(legendItem);
            });
        }
        
        // 应用自定义区间
        function applyCustomIntervals() {
            // 验证区间配置
            for (let i = 0; i < customIntervals.length; i++) {
                if (customIntervals[i].min >= customIntervals[i].max) {
                    alert(`区间 ${i} 的最小值必须小于最大值！`);
                    return;
                }
                if (i > 0 && customIntervals[i].min !== customIntervals[i-1].max) {
                    customIntervals[i].min = customIntervals[i-1].max; // 自动修正连续性
                }
            }
            
            // 更新图例
            updateCustomLegend();
            
            // 重新生成地图
            if (dataPoints.length > 0) {
                if (currentProvince) {
                    showProvinceDetail(currentProvince);
                } else {
                    generateMap();
                }
            }
            
            alert('自定义区间配置已应用！');
        }
        
        // 根据自定义区间计算颜色
        function getColorByCustomInterval(numbers, allNumbers) {
            if (allNumbers.length === 0) return '#60a5fa';
            
            // 计算百分比排名
            const sortedNumbers = [...allNumbers].sort((a, b) => a - b);
            const rank = sortedNumbers.findIndex(n => n >= numbers);
            const percentage = (rank / allNumbers.length) * 100;
            
            // 找到对应的区间
            for (const interval of customIntervals) {
                if (percentage >= interval.min && percentage < interval.max) {
                    return interval.color;
                }
            }
            
            // 如果不在任何区间内，返回最后一个区间的颜色
            return customIntervals[customIntervals.length - 1].color;
        }
        
        // 添加数据点
        function addDataPoint() {
            const species = document.getElementById('provinceName').value.trim();
            const lng = parseFloat(document.getElementById('longitude').value);
            const lat = parseFloat(document.getElementById('latitude').value);
            const numbers = parseInt(document.getElementById('numbers').value);
            
            if (!species || isNaN(lng) || isNaN(lat) || isNaN(numbers)) {
                alert('请填写完整且有效的数据！');
                return;
            }
            
            const newPoint = {
                province: '密度点', // 统一标识，不绑定具体省份
                species: species,
                lng: lng,
                lat: lat,
                numbers: numbers
            };
            
            dataPoints.push(newPoint);
            updateDataTable();
            updateStats();
            
            // 清空输入框
            document.getElementById('provinceName').value = '';
            document.getElementById('longitude').value = '';
            document.getElementById('latitude').value = '';
            document.getElementById('numbers').value = '';
        }
        
        // 删除数据点
        function deleteDataPoint(index) {
            dataPoints.splice(index, 1);
            updateDataTable();
            updateStats();
        }
        
        // 清空所有数据
        function clearAllData() {
            if (confirm('确定要清空所有数据吗？')) {
                dataPoints = [];
                speciesData = [];
                updateDataTable();
                updateStats();
                myChart.setOption({
                    series: [{
                        data: []
                    }]
                });
            }
        }
        
        // 导入Excel数据
        function importExcel() {
            const fileInput = document.getElementById('excelFile');
            const file = fileInput.files[0];
            
            if (!file) {
                alert('请先选择Excel文件！');
                return;
            }
            
            const reader = new FileReader();
            reader.onload = function(e) {
                try {
                    const data = new Uint8Array(e.target.result);
                    const workbook = XLSX.read(data, { type: 'array' });
                    const firstSheetName = workbook.SheetNames[0];
                    const worksheet = workbook.Sheets[firstSheetName];
                    const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
                    
                    // 检查表头
                    if (jsonData.length < 2) {
                        alert('Excel文件格式错误！至少需要表头和数据行。');
                        return;
                    }
                    
                    const headers = jsonData[0];
                    const expectedHeaders = ['species', 'longitude', 'latitude', 'numbers'];
                    
                    // 检查是否包含必要的列
                    const hasRequiredColumns = expectedHeaders.every(header => 
                        headers.some(h => h && h.toString().toLowerCase().includes(header))
                    );
                    
                    if (!hasRequiredColumns) {
                        alert('Excel文件格式错误！需要包含以下列：species, longitude, latitude, numbers');
                        return;
                    }
                    
                    // 找到列索引
                    const colIndexes = {
                        species: headers.findIndex(h => h && h.toString().toLowerCase().includes('species')),
                        longitude: headers.findIndex(h => h && h.toString().toLowerCase().includes('longitude')),
                        latitude: headers.findIndex(h => h && h.toString().toLowerCase().includes('latitude')),
                        numbers: headers.findIndex(h => h && h.toString().toLowerCase().includes('numbers'))
                    };
                    
                    // 清空现有数据
                    dataPoints = [];
                    speciesData = [];
                    
                    // 处理数据行
                    for (let i = 1; i < jsonData.length; i++) {
                        const row = jsonData[i];
                        if (row.length >= Math.max(...Object.values(colIndexes)) + 1) {
                            const species = row[colIndexes.species];
                            const lng = parseFloat(row[colIndexes.longitude]);
                            const lat = parseFloat(row[colIndexes.latitude]);
                            const numbers = parseInt(row[colIndexes.numbers]);
                            
                            if (species && !isNaN(lng) && !isNaN(lat) && !isNaN(numbers)) {
                                // 将species数据独立存储
                                speciesData.push({
                                    species: species.toString(),
                                    lng: lng,
                                    lat: lat,
                                    numbers: numbers
                                });
                                
                                // 密度点数据仍然存储在dataPoints中，但province字段用于地图显示
                                dataPoints.push({
                                    province: '密度点', // 统一标识，不绑定具体省份
                                    lng: lng,
                                    lat: lat,
                                    numbers: numbers,
                                    species: species.toString() // 保留物种信息
                                });
                            }
                        }
                    }
                    
                    if (dataPoints.length > 0) {
                        updateDataTable();
                        updateStats();
                        alert(`成功导入 ${dataPoints.length} 条数据！`);
                        
                        // 自动生成地图
                        generateMap();
                    } else {
                        alert('没有找到有效的数据行！');
                    }
                    
                } catch (error) {
                    console.error('Excel解析错误:', error);
                    alert('Excel文件解析失败！请检查文件格式。');
                }
            };
            
            reader.readAsArrayBuffer(file);
        }
        
        // 下载Excel模板
        function downloadTemplate() {
            const templateData = [
                ['species', 'longitude', 'latitude', 'numbers'],
                ['麋鹿', 120.0, 32.0, 1000],
                ['麋鹿', 120.2, 30.0, 800],
                ['麋鹿', 117.0, 31.5, 600],
                ['麋鹿', 118.0, 33.0, 500]
            ];
            
            const ws = XLSX.utils.aoa_to_sheet(templateData);
            const wb = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(wb, ws, '数据模板');
            
            // 设置列宽
            ws['!cols'] = [
                { width: 15 }, // species
                { width: 12 }, // longitude
                { width: 12 }, // latitude
                { width: 12 }  // numbers
            ];
            
            XLSX.writeFile(wb, '物种密度分布图数据模板.xlsx');
        }
        
        // 更新数据表格
        function updateDataTable() {
            const tbody = document.getElementById('tableBody');
            tbody.innerHTML = '';
            
            dataPoints.forEach((point, index) => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${point.species || point.province}</td>
                    <td>${point.lng}</td>
                    <td>${point.lat}</td>
                    <td>${point.numbers.toLocaleString()}</td>
                    <td>
                        <button onclick="deleteDataPoint(${index})" style="background: #dc3545; color: white; border: none; padding: 5px 10px; border-radius: 3px; cursor: pointer;">删除</button>
                    </td>
                `;
                tbody.appendChild(row);
            });
        }
        
        // 更新统计信息
        function updateStats() {
            document.getElementById('dataCount').textContent = dataPoints.length;
            document.getElementById('dataCountDisplay').textContent = dataPoints.length;
            const total = dataPoints.reduce((sum, point) => sum + point.numbers, 0);
            document.getElementById('totalNumbers').textContent = total.toLocaleString();
            
            // 更新物种列表显示
            if (dataPoints.length > 0) {
                const species = [...new Set(dataPoints.map(p => p.species || p.province))];
                document.getElementById('provinceList').textContent = species.join(', ');
            } else {
                document.getElementById('provinceList').textContent = '无';
            }
        }
        
        // 生成密度分布图
        function generateMap() {
            if (dataPoints.length === 0) {
                alert('请先添加一些数据点！');
                return;
            }
            
            const option = {
                title: {
                    text: '中国物种密度分布图',
                    left: 'center',
                    textStyle: {
                        fontSize: 18,
                        fontWeight: 'normal',
                        color: '#cccccc'
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function(params) {
                        if (params.data && params.data.numbers) {
                            const speciesName = params.data.species || params.data.province;
                            return `
                                <div style="padding: 10px;">
                                    <h4 style="margin: 0 0 10px 0; color: #60a5fa;">${speciesName}</h4>
                                    <p><strong>数量/密度:</strong> ${params.data.numbers.toLocaleString()}</p>
                                    <p><strong>坐标:</strong> (${params.data.lng}, ${params.data.lat})</p>
                                </div>
                            `;
                        }
                        return params.name;
                    },
                    backgroundColor: 'rgba(26,26,26,0.95)',
                    borderColor: '#3b82f6',
                    borderWidth: 2,
                    textStyle: {
                        color: '#cccccc'
                    }
                },
                visualMap: {
                    min: 0,
                    max: Math.max(...dataPoints.map(p => p.numbers)),
                    left: 'left',
                    top: 'bottom',
                    text: ['低密度', '高密度'],
                    calculable: true,
                    textStyle: {
                        color: '#cccccc'
                    },
                    inRange: {
                        color: customIntervals.map(interval => interval.color)
                    }
                },
                geo: {
                    map: 'china',
                    roam: true,
                    center: [105.0, 36.0],
                    zoom: 1.2,
                    selectable: true,
                    itemStyle: {
                        areaColor: '#1e3a8a',
                        borderColor: '#3b82f6',
                        borderWidth: 1
                    },
                    emphasis: {
                        selectable: true,
                        itemStyle: {
                            areaColor: '#60a5fa',
                            borderColor: '#93c5fd',
                            borderWidth: 2
                        }
                    },
                    select: {
                        itemStyle: {
                            areaColor: '#06b6d4',
                            borderColor: '#22d3ee',
                            borderWidth: 3,
                            shadowBlur: 20,
                            shadowColor: 'rgba(6, 182, 212, 0.4)'
                        }
                    }
                },
                series: [
                    {
                        name: '密度分布',
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        data: dataPoints.map(point => ({
                            name: point.species || point.province,
                            value: [point.lng, point.lat, point.numbers],
                            province: point.province,
                            species: point.species,
                            lng: point.lng,
                            lat: point.lat,
                            numbers: point.numbers
                        })),
                        symbolSize: function(val) {
                            return Math.max(8, Math.min(30, val[2] / 100)); // 根据数量调整大小
                        },
                        itemStyle: {
                            color: function(params) {
                                const numbers = params.data.numbers;
                                return getColorByCustomInterval(numbers, dataPoints.map(p => p.numbers));
                            },
                            shadowBlur: 15,
                            shadowColor: 'rgba(0, 0, 0, 0.3)',
                            borderWidth: 0
                        }
                    }
                ]
            };
            
            myChart.setOption(option);
        }
        
        // 省份名称映射表 - 将地图标准名称映射到Excel中的名称
        const provinceNameMap = {
            '北京': ['北京', '北京市', '北京省'],
            '天津': ['天津', '天津市', '天津省'],
            '河北': ['河北', '河北省', '冀'],
            '山西': ['山西', '山西省', '晋'],
            '内蒙古': ['内蒙古', '内蒙古自治区', '内蒙古省'],
            '辽宁': ['辽宁', '辽宁省', '辽'],
            '吉林': ['吉林', '吉林省', '吉'],
            '黑龙江': ['黑龙江', '黑龙江省', '黑'],
            '上海': ['上海', '上海市', '上海省'],
            '江苏': ['江苏', '江苏省', '苏'],
            '浙江': ['浙江', '浙江省', '浙'],
            '安徽': ['安徽', '安徽省', '皖'],
            '福建': ['福建', '福建省', '闽'],
            '江西': ['江西', '江西省', '赣'],
            '山东': ['山东', '山东省', '鲁'],
            '河南': ['河南', '河南省', '豫'],
            '湖北': ['湖北', '湖北省', '鄂'],
            '湖南': ['湖南', '湖南省', '湘'],
            '广东': ['广东', '广东省', '粤'],
            '广西': ['广西', '广西壮族自治区', '广西省'],
            '海南': ['海南', '海南省', '琼'],
            '重庆': ['重庆', '重庆市', '重庆省'],
            '四川': ['四川', '四川省', '川'],
            '贵州': ['贵州', '贵州省', '贵'],
            '云南': ['云南', '云南省', '云'],
            '西藏': ['西藏', '西藏自治区', '西藏省'],
            '陕西': ['陕西', '陕西省', '陕'],
            '甘肃': ['甘肃', '甘肃省', '甘'],
            '青海': ['青海', '青海省', '青'],
            '宁夏': ['宁夏', '宁夏回族自治区', '宁夏省'],
            '新疆': ['新疆', '新疆维吾尔自治区', '新疆省'],
            '台湾': ['台湾', '台湾省'],
            '香港': ['香港', '香港特别行政区'],
            '澳门': ['澳门', '澳门特别行政区']
        };
        
        // 显示物种数据详情
        function showProvinceDetail(provinceName) {
            if (!provinceName) return;
            
            console.log('显示详情:', provinceName);
            
            // 过滤该区域的数据点
            const provinceDataPoints = dataPoints.filter(point => {
                return point.province === provinceName || point.species === provinceName;
            });
            
            if (provinceDataPoints.length === 0) {
                alert(`没有找到${provinceName}的数据点！\n\n当前数据点包含的物种：\n${[...new Set(dataPoints.map(p => p.species || p.province))].join(', ')}`);
                return;
            }
            
            // 更新页面标题
            document.getElementById('mapTitle').textContent = `🗺️ ${provinceName}密度分布图`;
            
            // 创建详情级别的图表配置
            const provinceOption = {
                title: {
                    text: `${provinceName}密度分布图`,
                    left: 'center',
                    top: 20,
                    textStyle: {
                        fontSize: 24,
                        fontWeight: 'bold',
                    color: '#1e3c72'
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function(params) {
                        if (params.data && params.data.numbers) {
                            const speciesName = params.data.species || params.data.province;
                            return `
                                <div style="padding: 10px;">
                                    <h4 style="margin: 0 0 10px 0; color: #1e3c72;">${speciesName}</h4>
                                    <p><strong>数量/密度:</strong> ${params.data.numbers.toLocaleString()}</p>
                                    <p><strong>坐标:</strong> (${params.data.lng}, ${params.data.lat})</p>
                                </div>
                            `;
                        }
                        return params.name;
                    },
                    backgroundColor: 'rgba(255,255,255,0.95)',
                    borderColor: '#1e3c72',
                    borderWidth: 2,
                    textStyle: {
                        color: '#333'
                    }
                },
                visualMap: {
                    min: 0,
                    max: Math.max(...provinceDataPoints.map(p => p.numbers)),
                    left: 'left',
                    top: 'bottom',
                    text: ['低密度', '高密度'],
                    calculable: true,
                    textStyle: {
                        color: '#cccccc'
                    },
                    inRange: {
                        color: ['#1e3a8a', '#3b82f6', '#60a5fa', '#93c5fd', '#c7d2fe', '#e0e7ff', '#fef3c7', '#fde68a', '#f59e0b', '#ea580c', '#dc2626']
                    }
                },
                geo: {
                    map: 'china',
                    roam: true,
                    center: [105.0, 36.0],
                    zoom: 1.2,
                    selectable: true,
                    itemStyle: {
                        areaColor: '#1e3a8a',
                        borderColor: '#3b82f6',
                        borderWidth: 1
                    },
                    emphasis: {
                        selectable: true,
                        itemStyle: {
                            areaColor: '#60a5fa',
                            borderColor: '#93c5fd',
                            borderWidth: 2
                        }
                    },
                    select: {
                        itemStyle: {
                            areaColor: '#06b6d4',
                            borderColor: '#22d3ee',
                            borderWidth: 3,
                            shadowBlur: 20,
                            shadowColor: 'rgba(6, 182, 212, 0.4)'
                        }
                    }
                },
                series: [
                    {
                        name: '密度分布',
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        data: provinceDataPoints.map(point => ({
                            name: point.species || point.province,
                            value: [point.lng, point.lat, point.numbers],
                            province: point.province,
                            species: point.species,
                            lng: point.lng,
                            lat: point.lat,
                            numbers: point.numbers
                        })),
                        symbolSize: function(val) {
                            return Math.max(8, Math.min(30, val[2] / 100));
                        },
                        itemStyle: {
                            color: function(params) {
                                const numbers = params.data.numbers;
                                return getColorByCustomInterval(numbers, provinceDataPoints.map(p => p.numbers));
                            },
                            shadowBlur: 15,
                            shadowColor: 'rgba(0, 0, 0, 0.3)',
                            borderWidth: 0
                        }
                    }
                ]
            };
            
            // 设置省份图表
            myChart.setOption(provinceOption);
            
            // 高亮选中的省份
            highlightSelectedProvince(provinceName);
            
            console.log('省份详情显示完成:', provinceName);
        }
        
        // 高亮选中的省份
        function highlightSelectedProvince(provinceName) {
            // 清除之前的高亮
            myChart.dispatchAction({
                type: 'downplay'
            });
            
            // 高亮选中的省份
            myChart.dispatchAction({
                type: 'highlight',
                name: provinceName
            });
            
            // 设置选中状态
            myChart.dispatchAction({
                type: 'select',
                name: provinceName
            });
        }
        
        // 返回全国地图
        function showNationalMap() {
            // 恢复页面标题
            document.getElementById('mapTitle').textContent = '🗺️ 中国物种密度分布图生成器';
            
            // 重置地图标题为全国视图
            myChart.setOption({
                title: {
                    text: '中国物种密度分布图'
                }
            });
            
            // 清除高亮状态
            myChart.dispatchAction({
                type: 'downplay'
            });
            
            // 重新生成全国地图
            generateMap();
        }
        
        // 加载中国地图数据
        function loadChinaMap() {
            fetch('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json')
                .then(response => response.json())
                .then(data => {
                    console.log('=== 地图数据加载成功 ===');
                    console.log('地图数据:', data);
                    console.log('地图特性数量:', data.features ? data.features.length : '未知');
                    
                    echarts.registerMap('china', data);
                    console.log('地图已注册到ECharts');
                    
                    // 地图加载完成后初始化
                    const mapOption = {
                        backgroundColor: '#2a2a2a',
                        title: {
                            text: '中国物种密度分布图',
                            left: 'center',
                            top: 20,
                            textStyle: {
                                fontSize: 18,
                                fontWeight: 'bold',
                                color: '#cccccc'
                            },
                            subtext: '',
                            subtextStyle: {
                                color: '#999999',
                                fontSize: 12
                            }
                        },
                        geo: {
                            map: 'china',
                            roam: true,
                            center: [105.0, 36.0],
                            zoom: 1.2,
                            selectable: true,
                            selectedMode: 'single',
                            select: null,
                            itemStyle: {
                                areaColor: '#1e3a8a',
                                borderColor: '#3b82f6',
                                borderWidth: 1
                            },
                            emphasis: {
                                selectable: true,
                                itemStyle: {
                                    areaColor: '#60a5fa',
                                    borderColor: '#93c5fd',
                                    borderWidth: 2
                                }
                            },
                            // 添加hover时的样式变化
                            hoverAnimation: true,
                            select: {
                                itemStyle: {
                                    areaColor: '#06b6d4',
                                    borderColor: '#22d3ee',
                                    borderWidth: 3,
                                    shadowBlur: 20,
                                    shadowColor: 'rgba(6, 182, 212, 0.4)',
                                    shadowOffsetX: 1,
                                    shadowOffsetY: 1
                                }
                            }
                        },
                        series: [{
                            data: []
                        }]
                    };
                    
                    console.log('准备设置地图配置:', mapOption);
                    myChart.setOption(mapOption);
                    console.log('地图配置已设置');
                    
                    // 验证配置是否生效
                    setTimeout(() => {
                        const currentOption = myChart.getOption();
                        console.log('地图配置验证:', currentOption);
                        console.log('Geo配置验证:', currentOption.geo);
                        console.log('选中模式:', currentOption.geo[0].selectedMode);
                        console.log('是否可选:', currentOption.geo[0].selectable);
                    }, 500);
                })
                .catch(error => {
                    console.error('地图数据加载失败:', error);
                    document.getElementById('chinaMap').innerHTML = `
                                            <div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #cccccc;">
                        <div style="text-align: center;">
                            <h3>地图加载中...</h3>
                            <p>正在加载中国地图数据，请稍候...</p>
                            <p>如果长时间无法加载，请检查网络连接</p>
                        </div>
                    </div>
                    `;
                });
        }
        
        // 初始化
        loadChinaMap();
        updateStats();
        
        // 注意：颜色选择器功能需要相应的HTML元素支持
        // 如果需要此功能，请添加相应的HTML元素
        
        // 更新图例颜色（不更新地图）
        function updateLegendColors() {
            // 使用默认颜色
            const lowColor = '#87CEEB';  // 浅蓝色
            const highColor = '#FF6B6B'; // 红色
            const midColor = blendColors(lowColor, highColor, 0.5);
            
            // 检查元素是否存在再更新
            const legendLowColor = document.getElementById('legendLowColor');
            const legendMidColor = document.getElementById('legendMidColor');
            const legendHighColor = document.getElementById('legendHighColor');
            
            if (legendLowColor) legendLowColor.style.background = lowColor;
            if (legendMidColor) legendMidColor.style.background = midColor;
            if (legendHighColor) legendHighColor.style.background = highColor;
        }
        
        // 添加调试信息
        console.log('=== 地图初始化调试信息 ===');
        console.log('ECharts版本:', echarts.version);
        console.log('地图实例:', myChart);
        
        // 延迟检查地图状态
        setTimeout(() => {
            const option = myChart.getOption();
            console.log('地图配置验证中...');
            
            // 检查地图数据
            if (option.geo && option.geo[0] && option.geo[0].map) {
                console.log('地图加载完成');
            } else {
                console.log('地图加载失败');
            }
        }, 2000);
        
        // 监听地图点击事件
        myChart.on('click', function(params) {
            
            if (params.data && params.data.numbers) {
                // 点击密度点，显示详细信息
                const speciesName = params.data.species || params.data.province;
                
                // 显示数据点详情
                if (params.data.species) {
                    alert(`物种: ${params.data.species}\n数量: ${params.data.numbers.toLocaleString()}\n坐标: (${params.data.lng}, ${params.data.lat})`);
                } else {
                    alert(`数据点: ${params.data.province}\n数量: ${params.data.numbers.toLocaleString()}\n坐标: (${params.data.lng}, ${params.data.lat})`);
                }
            } else if (params.componentType === 'geo' && params.name) {
                // 点击地图区域，设置选中状态
                const provinceName = params.name;
                
                // 检查当前省份是否已经被选中
                const currentOption = myChart.getOption();
                const isSelected = currentOption.geo && currentOption.geo[0] && currentOption.geo[0].select && currentOption.geo[0].select.name === provinceName;
                
                console.log('点击省份:', provinceName);
                console.log('当前选中状态:', isSelected);
                console.log('当前地图配置:', currentOption.geo[0]);
                
                if (isSelected) {
                    // 如果已经选中，则取消选中
                    console.log('取消选中省份:', provinceName);
                    
                    // 使用 dispatchAction 取消选中
                    myChart.dispatchAction({
                        type: 'unselect',
                        name: provinceName
                    });
                    
                    // 更新标题
                    myChart.setOption({
                        title: {
                            text: '中国物种密度分布图'
                        }
                    });
                    
                } else {
                    // 如果未选中，则选中该省份
                    console.log('选中省份:', provinceName);
                    
                    // 使用 dispatchAction 选中省份
                    myChart.dispatchAction({
                        type: 'select',
                        name: provinceName
                    });
                    
                    // 更新标题
                    myChart.setOption({
                        title: {
                            text: `${provinceName}密度分布图`
                        }
                    });
                }
            }
        });
        
        // 响应式调整
        window.addEventListener('resize', function() {
            myChart.resize();
        });


        
        // 导出为Excel
        function exportToExcel() {
            if (dataPoints.length === 0) {
                alert('没有数据可导出！');
                return;
            }

            // 准备导出数据，确保包含物种信息
            const exportData = dataPoints.map(point => ({
                species: point.species || point.province,
                longitude: point.lng,
                latitude: point.lat,
                numbers: point.numbers
            }));

            const worksheet = XLSX.utils.json_to_sheet(exportData);
            const workbook = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(workbook, worksheet, '物种密度分布数据');

            // 设置列宽
            worksheet['!cols'] = [
                { width: 15 }, // species
                { width: 12 }, // longitude
                { width: 12 }, // latitude
                { width: 12 }  // numbers
            ];

            XLSX.writeFile(workbook, '物种密度分布数据.xlsx');
        }
        
        // 测试选中功能
        function testSelection() {
            console.log('=== 测试选中功能 ===');
            console.log('当前地图实例:', myChart);
            
            // 获取当前地图配置
            const currentOption = myChart.getOption();
            console.log('当前地图配置:', currentOption);
            console.log('当前Geo配置:', currentOption.geo);
            
            // 直接设置地图配置和选中状态
            console.log('设置江苏省为选中状态...');
            myChart.setOption({
                geo: [{
                    select: {
                        name: '江苏'
                    }
                }],
                title: {
                    text: '江苏省密度分布图'
                }
            });
            
            console.log('已设置选中状态和标题');
            
            // 检查地图配置
            setTimeout(() => {
                const option = myChart.getOption();
                console.log('测试选中后的配置:', option);
                console.log('Geo配置:', option.geo);
                console.log('选中状态:', option.geo[0].select);
                
                // 尝试选中其他省份测试
                setTimeout(() => {
                    console.log('测试选中北京市...');
                    myChart.setOption({
                        geo: [{
                            select: {
                                name: '北京'
                            }
                        }],
                        title: {
                            text: '北京市密度分布图'
                        }
                    });
                    
                    setTimeout(() => {
                        const finalOption = myChart.getOption();
                        console.log('最终配置:', finalOption);
                        console.log('最终选中状态:', finalOption.geo[0].select);
                        alert('已测试选中功能，请查看控制台输出和地图效果');
                    }, 500);
                }, 1000);
            }, 500);
        }
        
        // 更新地图颜色
        function updateMapColors() {
            // 使用自定义区间的颜色
            if (customIntervals.length > 0) {
                const colors = customIntervals.map(interval => interval.color);
                
                // 更新自定义图例
                updateCustomLegend();
                
                // 如果地图已经生成，则更新地图颜色
                if (dataPoints.length > 0) {
                    const currentOption = myChart.getOption();
                    if (currentOption.visualMap && currentOption.visualMap[0]) {
                        myChart.setOption({
                            visualMap: [{
                                inRange: {
                                    color: colors
                                }
                            }]
                        });
                    }
                }
                
                console.log('自定义区间颜色已更新:', colors);
            }
        }
        
        // 颜色混合函数
        function blendColors(color1, color2, ratio) {
            // 将十六进制颜色转换为RGB
            const hex1 = color1.replace('#', '');
            const hex2 = color2.replace('#', '');
            
            const r1 = parseInt(hex1.substr(0, 2), 16);
            const g1 = parseInt(hex1.substr(2, 2), 16);
            const b1 = parseInt(hex1.substr(4, 2), 16);
            
            const r2 = parseInt(hex2.substr(0, 2), 16);
            const g2 = parseInt(hex2.substr(2, 2), 16);
            const b2 = parseInt(hex2.substr(4, 2), 16);
            
            // 混合颜色
            const r = Math.round(r1 * (1 - ratio) + r2 * ratio);
            const g = Math.round(g1 * (1 - ratio) + g2 * ratio);
            const b = Math.round(b1 * (1 - ratio) + b2 * ratio);
            
            // 转换回十六进制
            return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
        }
        
        // 清除选中状态
        function clearSelection() {
            console.log('=== 清除选中状态 ===');
            
            // 直接通过setOption清除选中状态
            myChart.setOption({
                geo: [{
                    select: null
                }],
                title: {
                    text: '中国物种密度分布图'
                }
            });
            
            console.log('已清除所有选中状态');
            alert('已清除所有选中状态');
        }
        
        // 直接测试选中状态
        function testDirectSelection() {
            console.log('=== 直接测试选中状态 ===');
            
            // 直接设置选中状态和标题
            myChart.setOption({
                geo: [{
                    select: {
                        name: '江苏'
                    }
                }],
                title: {
                    text: '江苏省密度分布图'
                }
            });
            
            console.log('已直接设置江苏省为选中状态和标题');
            
            setTimeout(() => {
                const option = myChart.getOption();
                console.log('直接设置后的配置:', option);
                console.log('选中状态:', option.geo[0].select);
                alert('已直接设置选中状态，请查看地图效果');
            }, 500);
        }
        
        // 页面加载完成后初始化自定义区间配置
        document.addEventListener('DOMContentLoaded', function() {
            initCustomIntervals();
            console.log('自定义区间配置已初始化');
        });
    </script>
</body>
</html> 